import {
  PageHeader,
  Tabs,
  Statistic,
  Descriptions,
  Card,
  Row,
  Col,
  Table,
  Space,
  Button,
  message,
} from "antd";
import React, { Component } from "react";
import { Orderdetail, Deliveryreceive, Orderpay } from "../../../services/auth";

const { TabPane } = Tabs;

const Content = ({ children, extra }) => (
  <div className="content">
    <div className="main">{children}</div>
    <div className="extra">{extra}</div>
  </div>
);

export default class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.handleCreateClick = this.props.handleCreateClick;
    this.state = {
      dataSource: [],
      status: this.props.value.status,
      record: [],
    };
  }

  componentDidMount() {
    const { value } = this.props;
    Orderdetail(value.id).then((response) => {
      console.log(response.data);
      response.data.goods.push({
        goods_id: "总计",
        discount: response.data.discount,
        current_price: response.data.total_price,
      });
      this.setState({
        dataSource: response.data.goods,
        record: response.data.delivery,
      });
    });
  }
  //页面刷新函数
  reset = (id) => {
    Orderdetail(id).then((response) => {
      console.log(response.data);
      response.data.goods.push({
        goods_id: "总计",
        discount: response.data.discount,
        current_price: response.data.total_price,
      });
      this.setState({
        status: response.data.status,
        dataSource: response.data.goods,
        record: response.data.delivery,
      });
    });
  };
  //确认收货的函数
  Commit = (record_id) => {
    Deliveryreceive(record_id).then(
      (response) => {
        message.success("收货成功");
        this.reset(this.props.value.id);
      },
      (error) => {
        console.log("数据获取失败", error);
      }
    );
  };

  render() {
    const { value } = this.props;
    const columns1 = [
      {
        title: "商品编号",
        dataIndex: "goods_id",
        align: "center",
      },
      {
        title: "商品名称",
        dataIndex: "goods_name",
        align: "center",
      },
      {
        title: "订购数量",
        dataIndex: "quantity",
        align: "center",
      },
      {
        title: "定价",
        dataIndex: "price",
        align: "center",
      },
      {
        title: "折扣",
        dataIndex: "discount",
        width: "15%",
        editable: true,
        align: "center",
      },
      {
        title: "产品价格",
        dataIndex: "current_price",
        align: "center",
      },
    ];

    const columns2 = [
      {
        title: "ID",
        dataIndex: "id",
        align: "center",
      },
      {
        title: "商品编号",
        dataIndex: "goods_id",
        align: "center",
      },
      {
        title: "商品名称",
        dataIndex: "goods_name",
        align: "center",
      },
      {
        title: "发货工厂",
        dataIndex: "plant_name",
        align: "center",
      },
      {
        title: "数量",
        dataIndex: "quantity",
        align: "center",
      },
      {
        title: "计划发货日期",
        dataIndex: "plan_date",
        align: "center",
      },
      {
        title: "发货日期",
        dataIndex: "deliv_date",
        align: "center",
      },
      {
        title: "",
        key: "action",
        align: "center",
        render: (record) => (
          <Space>
            {record.arrive_date === undefined ? (
              record.deliv_date !== undefined ? (
                <Button
                  type="link"
                  size="small"
                  onClick={() => {
                    this.Commit(record.id);
                  }}
                >
                  确认收货
                </Button>
              ) : (
                <Button type="text" size="small" disabled>
                  已拣配
                </Button>
              )
            ) : (
              <Button type="text" size="small" disabled>
                已于{record.arrive_date}收货
              </Button>
            )}
          </Space>
        ),
      },
    ];

    return (
      <PageHeader
        className="site-page-header-responsive"
        title={`编号：${value.id}`}
        extra={
          <Button
            type="primary"
            disabled={this.state.status !== "待付款"}
            onClick={() => {
              Orderpay(value.id).then(
                (response) => {
                  message.success("付款成功");
                  this.reset(this.props.value.id);
                },
                (error) => {
                  console.log("数据获取失败", error);
                }
              );
              Orderdetail(this.props.value.id).then((response) => {
                console.log(response.data);
                response.data.goods.push({
                  goods_id: "总计",
                  discount: response.data.discount,
                  current_price: response.data.total_price,
                });
                this.setState({
                  status: response.data.status,
                  dataSource: response.data.goods,
                  record: response.data.delivery,
                });
              });
            }}
          >
            确认付款
          </Button>
        }
        footer={
          <Tabs defaultActiveKey="1">
            <TabPane tab="商品详情" key="1">
              <Card bordered={false}>
                <Table
                  dataSource={this.state.dataSource}
                  columns={columns1}
                  pagination={false}
                  size="small"
                  rowKey={(record) => record.goods_id}
                />
              </Card>
            </TabPane>
            <TabPane tab="物流详情" key="2">
              <Card bordered={false}>
                <Table
                  dataSource={this.state.record}
                  columns={columns2}
                  pagination={false}
                  size="small"
                  rowKey={(record) => record.id}
                />
              </Card>
            </TabPane>
          </Tabs>
        }
      >
        <Content
          extra={
            <div>
              <br />
              <Card bordered={false} bodyStyle={{paddingLeft:"0px"}}>
                <Row gutter={16}>
                  <Col span={3}>
                    <Statistic title="状态" value={this.state.status} />
                  </Col>
                  <Col span={5}>
                    <Statistic
                      title="总价"
                      prefix="¥"
                      value={value.total_price}
                      valueStyle={{ color: '#cf1322' }}
                    />
                  </Col>
                </Row>
              </Card>
            </div>
          }
        >
          <Descriptions size="default" column={2} bordered>
            {/* 判断若quotation_id为空，则证明直接创建订单，以下内容为无 */}
            <Descriptions.Item label="参照报价单" contentStyle={{fontWeight:"bold"}}>
              {value.quotation_id}
            </Descriptions.Item>
            <Descriptions.Item label="公司" contentStyle={{fontWeight:"bold"}}>
              {value.company_id + " " + value.company_name}
            </Descriptions.Item>
            <Descriptions.Item label="操作员" contentStyle={{fontWeight:"bold"}}>
              {value.operator_name}
            </Descriptions.Item>
            <Descriptions.Item label="预计送达日期" contentStyle={{fontWeight:"bold"}}>
              {value.req_deliv_date}
            </Descriptions.Item>
            <Descriptions.Item label="订单折扣" contentStyle={{fontWeight:"bold"}}>
              {value.discount}%
            </Descriptions.Item>
            <Descriptions.Item label="送货地点" contentStyle={{fontWeight:"bold"}}>
              {value.ship_to_address}
            </Descriptions.Item>
          </Descriptions>
        </Content>
      </PageHeader>
    );
  }
}
